<template>
  <div class="main-content">
    <div style="position: absolute; font-size: 40px; font-weight: bold; color: white; font-style: italic; top: 200px; left: 200px">欢迎光临爱民宿 B&B</div>
    <div>
      <!--<img src="@/assets/imgs/carousel.jpg" style="width: 100%; height: 300px; border-bottom-left-radius: 30%; border-bottom-right-radius: 30%" alt="">-->
      <img src="@/assets/imgs/img.png" style="width: 100%; height: 300px; border-bottom-left-radius: 30%; border-bottom-right-radius: 30%" alt="">
    </div>

    <div style="width: 90%; margin: 35px auto; text-align: left;color: #8c939d">
      <el-row>
        <el-col :span="12">
          <div >
            <div style="font-size: 25px; font-weight: bold;margin-bottom: 60px;">近期活动</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div >
            <div style="font-size: 25px; font-weight: bold;margin-bottom: 60px;">我不知道</div>

          </div>
        </el-col>
      </el-row>
    </div>
    <div style="width: 90%; margin: 20px auto; text-align: left; color: #8c939d">
      <div style="text-align: center; font-size: 25px; font-weight: bold;margin-bottom: 60px;">平台优质推荐</div>
      <div style="margin-top: 20px;">
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in hotelData" :key="item">
            <img :src="item.avatar" style="width: 100%; height: 250px; border-radius: 15px" alt="" @click="navToDetail(item.id)">
            <div style="font-size: 16px; font-weight: bold; margin-top: 10px; color: #455873FF">{{item.name}}</div>
            <div style="margin-top: 10px;margin-bottom: 40px;">
              <span style="font-weight: bold; font-size: 16px; color: red">￥{{item.price}}</span> 起
              <!-- <span style="font-size: 14px; color: #455873FF; margin-left: 20px"><i class="el-icon-chat-line-square"></i> 点评</span> -->
            </div>
          </el-col>
        </el-row>
      </div>

    </div>
    <div class="ab">
      <div style="text-align: center; font-size: 25px; font-weight: bold;color: #8c939d">关于我们</div>
      <div class="aboutus">
        <div style="flex: 1">
          <img src="@/assets/imgs/icon-1.png" alt="">
          <div>知名连锁，客房充足，选择更多</div>
        </div>
        <div style="flex: 1;">
          <img src="@/assets/imgs/icon-2.png" alt="">
          <div>专业服务，房间干净，放心入住</div>
        </div>
        <div style="flex: 1">
          <img src="@/assets/imgs/icon-3.png" alt="">
          <div>安全便捷，服务保障，用心生活</div>
        </div>
      </div>
    </div>

  </div>

</template>

<style scoped>
.ab{
  width: 60%;
  margin: 30px auto;
  text-align: center
}
.aboutus{
  display: flex;
  margin-top: 30px
}

.aboutus div{
  font-size: 14px;
  margin-top: 10px;
  color: #455873FF
}

.aboutus img{
  width: 50px;
  height: 50px
}
</style>

<script>

import {backLogin} from "@/Config/Tool";

export default {

  data() {
    return {
      hotelData: [],
    }
  },
  mounted() {
    backLogin("USER")
    this.loadHotels()
  },
  methods: {
    loadHotels() {
      this.$request.get("/hotel/selectAll").then(res => {
        if (res.code === '200') {
          this.hotelData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    navToDetail(id) {
      location.href = '/front/hotel?id=' + id
    }
  }
}
</script>
